MkImageSlideshow
Node to show an Image slideshow (in autoplay mode).¶
Example: Regular¶
Name | Children | Inherits |
---|---|---|
MkTemplate mknodes.templatenodes.mktemplate Node representing a jinja template. |
graph TD
94272694075328["mkimageslideshow.MkImageSlideshow"]
94272697537520["mktemplate.MkTemplate"]
94272697822880["mkcontainer.MkContainer"]
94272697820320["mknode.MkNode"]
94272697777776["node.Node"]
139836355973312["builtins.object"]
94272697537520 --> 94272694075328
94272697822880 --> 94272697537520
94272697820320 --> 94272697822880
94272697777776 --> 94272697820320
139836355973312 --> 94272697777776
/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkimageslideshow/metadata.toml
[metadata]
icon = "mdi:image-multiple"
name = "MkImageSlideshow"
group = "image"
[[resources.js]]
link = "https://rawgit.com/ruyadorno/simple-slider/master/dist/simpleslider.min.js"
[[resources.js]]
filename = "slideshow.js"
content = """
window.addEventListener('DOMContentLoaded', function () {
simpleslider.getSlider();
})
"""
[[resources.css]]
filename = "https://unpkg.com/img-comparison-slider@7/dist/styles.css"
[examples.regular]
title = "Regular"
jinja = """
{{ ["https://picsum.photos/700", "https://picsum.photos/701"] | MkImageSlideshow }}
"""
[output.html]
template = """
<div style="width: 100%; padding-bottom: 25%" data-simple-slider="">
{% for image_url in node.images %}
<img src="{{ image_url }}">
{% endfor %}
</div>
"""